<template>
  <div class="mapIndex">
     <vae-map  :options="options"   :baseLayers="baseLayers"   id="map_sgzz"    @init-map="initMap" ></vae-map>
  </div>
</template>

<script>
import  geojson from "@/../public/mapJson/100000_full.json"
import Vue from 'vue'
import vpopup from './popup_sgzz.vue'
export default {
  name: "map",
  props:{
      vm:null
  },
  data() {
    return {
      options:{
        zoom:3.5,
        zoomDelta:0.2,
      },
      baseLayers:['GaoDe.Satellite.Map','GaoDe.Satellite.Annotion'],
      // baseLayers:L.layerGroup(),
      map:null,
      markerLayers:L.layerGroup(),
      markers:new Map(),
      geojsonMap:null,
      allMineData:[],
      levelMap:{
        "01":"#db2d2d ",
        "02":"#fc7500",
        "03":"#e3ca21",
        "04":"#00b4ff",
      },
      iconFont:{
        "ts":'icon iconfont icon-jiance',//态势预警
        "sg":'icon iconfont icon-shigu',//事故预警
        "zh":'icon iconfont icon-leidian',//灾害
        "ws":'icon iconfont icon-wasi',//瓦斯预警
        "jd":'icon iconfont icon-tianqi',//瓦斯预警
      },
      active:"",
      listMap:[
        {name:"态势预警",num:10,type:"ts"},
        {name:"事故预警",num:10,type:"sg"},
        {name:"灾害预警",num:10,type:"zh"},
        {name:"瓦斯量",num:10,type:"ws"},
        {name:"极端天气",num:10,type:"jd"},
      ],
      tileLayer: L.layerGroup(),
      mapJson:[{
          "id": "1",
          "name": "美国蒙大纳州金属矿",
          "lat": "41.087581",
          "lng": "-102.38383",
          "time": "2021-06-14",
          "address": "美国",
          "type": "铂金",
          "fs": "井工",
          "mainType": "/",
          "dzType": "/",
          "swType": "/",
          "reason": "小型胶轮车与轨道运输车相撞",
          "level": "03",
          "levelName": "一般事故",
          "sgType": "运输",
          "num": "1",
          "tlName": "云南省弥渡县金宝山铂钯矿",
          "tlList": "2019.2.23内蒙古锡林郭勒盟西乌旗银漫矿业公司重大车辆事故"
        },
        {
          "id": "2",
          "name": "山西代县铁矿",
          "lat": "39.138464",
          "lng": "113.199426",
          "time":"2021-06-10",
          "address": "山西代县",
          "type": "铁矿石",
          "fs": "井工",
          "mainType": "水灾",
          "dzType": "中等",
          "swType": "中等",
          "reason": "/",
          "level": "01",
          "levelName": "重大事故",
          "sgType": "水害",
          "num": "2",
          "tlName": "江苏南京梅山铁矿、云南玉溪大洪山铁矿",
          "tlList": "2019.5.17 黑龙江逊克县铁矿透水事故、2011.7.11山东潍坊铁矿透水事故、1914.7.11美国密西根州铁矿透水事故"
        },
        {
          "id": "3",
          "name": "山西柳林寨崖底煤业",
          "lat": "37.365759",
          "lng": "111.039534",
          "time": "2021-06-21",
          "address": "山西柳林",
          "type": "煤炭",
          "fs": "井工",
          "mainType": "瓦斯",
          "dzType": "中等",
          "swType": "中等",
          "reason": "作业人员被吸入瓦斯管路",
          "level": "03",
          "levelName": "一般事故",
          "sgType": "其他",
          "num": "2",
          "tlName": "西坡煤业、宏盛聚德煤业",
          "tlList": ""
        },
        {
          "id": "4",
          "name": "鹤壁煤电股份有限公司六矿",
          "lat": "35.889195",
          "lng": "114.128271",
          "time": "2021-06-04",
          "address": "河南鹤壁",
          "type": "煤炭",
          "fs": "井工",
          "mainType": "瓦斯",
          "dzType": "中等",
          "swType": "中等",
          "reason": "巷掘进工作面发生煤与瓦斯突出事故",
          "level": "02",
          "levelName": "较大事故",
          "sgType": "瓦斯",
          "num": "2",
          "tlName": "鹤壁中泰矿业有限公司,云顶煤业有限公司",
          "tlList": "2018.8.6盘州煤与瓦斯突出事故,2008.10.13鹤壁六矿煤与瓦斯突出事故"
        }
      ],
    }
  },
  created(){
  },
  methods:{
     initMap(v){
        this.map=v;
        this.map.getZoom()
        this.initAll();
     },
     initAll(center){
        this.markerLayers.clearLayers();
        this.markers.clear();
        this.markerLayers.addTo(this.map);
        if(center){
          this.map.setView([34.2943,117.357],4)
        }
        this.initMarker()
        //  this.vm.$refs.sgzzView.init(row.id)
     },
     async  initMarker() {
          this.mapJson.forEach(v => {
            let icon = L.glyphicon({
              icon: 'icon iconfont icon-shigu',
              size: "26",//编译为width:24px,height:24px
              fontSize: "14",
              background: this.levelMap[v.level],
              color: '#fff',
              borderRadius: 26,//跟size一样大为圆形
              borderWidth: 1,
              borderColor:'#fff',
              boxShadow: false,
              additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
              className: 'className',
              effect: {
                type: null,//设置'halo'则默认开启光晕效果
                size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
                color: this.levelMap[v.level],//扩散的光晕的颜色
                interval: 3//动画的时长
              }
            });
            console.log(v.lang);
            let marker = L.marker([v.lat,v.lng], { riseOffset: 300,interactive: true, draggable: false }).setIcon(icon).addTo(this.markerLayers)
            this.bindPopup(marker,v);
            this.markers.set(v.id,marker)
            marker.on("click",e=>{
              this.markerClick(v,true)
            })
          })
      },
      bindPopup(marker,v) {
            let popupContent = "<div id='popup-" +v.id  + "' style='height:180px;'></div>";
            marker.bindPopup(popupContent, {offset: L.point(1, -10), minWidth: 250, closeButton: true});
            marker.on('popupopen', (e) => {
              console.log()
                new Vue({
                  el: '#popup-' + v.id,
                  render: h => h(vpopup, {props: {vdata: v, vm: this}})
                })
            });
      },
      markerClick(row,isOK){
        let target=this.markers.get(row.id)
        let icon = L.glyphicon({
            icon: 'icon iconfont icon-shigu',
            size: "26",//编译为width:24px,height:24px
            fontSize: "14",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 26,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: 'className',
            effect: {
              type: null,//设置'halo'则默认开启光晕效果
              size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 3//动画的时长
            }
          });
        this.markers.forEach((v) => {v.setIcon( icon); });
        if(target){
          let flashIcon = L.glyphicon({
            icon: 'icon iconfont icon-tianqi1',
            size: "26",//编译为width:24px,height:24px
            fontSize: "14",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 26,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: "animated infinite flash slow",
            effect: {
              type: "halo",//设置'halo'则默认开启光晕效果
              size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 3//动画的时长
            }
          });
          this.map.flyTo([row.lat,row.lng],6)
          target.setIcon(flashIcon);
          let isOpen= target.isPopupOpen()
          if(!isOpen){
              target.togglePopup();
          }
          if(isOK){
            console.log(row)
             this.vm.$refs.sgzzView.filterMapJson(row.id)
             this.vm.$refs.sgzzView.checkType(row.id)
          }
        }
      },


    }
}
</script>

<style lang="less">
  .iconMap{
    width: 2vw;
    height: 2vw;

  }
  .mapIndex{
    width: 100vw;
    height: 100vh;
    background: url("../../../public/images/indexBanner.png") no-repeat;
    background-size: 100%  100%;
    position: relative;

    .list{
      z-index: 1000;
      position: absolute;
      background: url("../../../public/images/bj1.png") no-repeat;
      padding: 1vh 0  1vh 0.5vh;
      background-size: 100% 100%;
      width: 11vw;
      left: 29vw;
      top: 11vh;
      color: #fff;
      .colorList{
        font-size: 1.2vh;
        padding-left: 0.5vw;
        padding-bottom: 0.5vh;
      }
      .iconColor{
        display: inline-block;
        width: 0.4vw;
        height: 0.4vw;
        border-radius: 80%;
      }
      .level1{
        background: #fb0d0dFF;
      }
      .level2{
        background: #fe9c00FF;
      }
      .level3{
        background: #ffdc6aFF;
      }
      .level4{
        background: #0d5afbFF;
      }
      .row{
        cursor: pointer;
        line-height: 2vh;
        font-size:1.2vh;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        color: #fff;
        .icon{

          padding-right: 0.5vw;
        }
      }
      .row.active{
        background: url("../../../public/images/bj.png") no-repeat;
      }
      .row:hover{
        background: url("../../../public/images/bj.png") no-repeat;
      }
    }
  }

</style>
<style>
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: transparent;
  background: url("../../../public/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  box-shadow:none;
  color: #FFF8DC;

}
</style>
